<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>镇长地图</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!-- 引入微信JSSDK -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #app {
      width: 100vw;
      height: 100vh;
      font-size: 0.6rem;
      margin: 0;
      padding: 0;
      background-repeat: no-repeat;
      background-position: 0 0 / cover;
      background-color: #101129;
    }

    .el-dialog {
      width: 100% !important;
    }
    .el-dialog__header {
    padding: 20px 10px 10px !important;
}
    .el-dialog__body {
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div id="mainMap" style="height: 100%; width: 100%"></div>
    <el-dialog :title="title" :visible.sync="dialogTableVisible" v-loading="tabelloading" element-loading-text="加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-table :data="zhenZhangData">
        <el-table-column property="name" label="镇名"></el-table-column>
        <el-table-column label="镇长" width="50">
          <template slot-scope="scope">
            <span>{{scope.row.ApprovedCount > 0 ? '有' :
              '无'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="预估收入" align="center">
          <template slot-scope="scope">
            <span>{{ showYuGu(scope.row)}}元 </span>
          </template>
        </el-table-column>


        <el-table-column property="UserCount" label="申请人数" align="center"></el-table-column>

        <el-table-column property="UserCount" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="shengqingzhenzhang(scope.row)" size="mini">申请</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-button type="primary" style="position: fixed;left: 20px;top: 20px;" @click="backProvince"
      v-if="level =='province' || level =='city' || level =='district'">返回省级</el-button>
    <el-button type="primary" style="position: fixed;left: 120px;top: 20px;" @click="backCity"
      v-if="level =='city' || level =='district' ">返回市级</el-button>
  </div>

  <script>
    new Vue({
      el: "#app", // 指定Vue实例控制的DOM元素
      data: {
        sign: true,
        back: '',
        baseUrl: 'https://dc.zygyx.com/',//基础路径
        baseUrl2: 'https://v2.zygyx.com/',
        provinceData: '',//省级数据
        provinceBackData: '',
        cityData: '',//市级数据
        cityBackData: '',
        districtData: '',//区县级数据
        title: "",
        level: '',
        bigDataList: [],
        dongtaijson: {},
        zhucetype: [],//用颜色区分注册的和未注册的
        loading: false,
        tabelloading: false,
        zhencode: "",
        dialogTableVisible: false,
        zhenZhangData: [],
        appid: '',//人人售电appid
        // phone: '',
        // openId: '',
        // pid: '',
        wxPagePath: 'https://dc.zygyx.com/miniapp/zhenzhangmap.html',
        wechatConfig: {},
        tipifi: [],
        quid: '',
        provinceId:'',
      },
      mounted() {
        this.getShengJson();
        const urlString = window.location.search;
        this.appid = this.getUrlParameter(urlString, 'appid');
        this.provinceId = this.getUrlParameter(urlString, 'provinceId');
        // this.phone = this.getUrlParameter(urlString, 'mobile');
        // this.openId = this.getUrlParameter(urlString, 'openId');
        // this.pid = this.getUrlParameter(urlString, 'pid');
        this.getqianzhenginfo()
        var that = this;
      },

      methods: {

        getUrlParameter(url, param) {
          // 改进的正则表达式，能够处理没有值的参数以及参数可能多次出现的情况
          const regex = new RegExp(`[?&]${param}(?:=([^&#]*))?`);
          const results = regex.exec(url);
          // 检查匹配结果
          if (results === null) {
            return null;
          }
          // 解码并返回匹配到的参数值
          return decodeURIComponent(results[1].replace(/\+/g, ' ') || '');
        },
        // 去申请镇长（获取省市区镇id）
        shengqingzhenzhang(val) {
          var that = this;
          that.tipifi[3] = val.name
          that.tabelloading = true;
          $.get(
            `${this.baseUrl}miniapp/Arera/GetZhenParents`,
            { code: `${val.id}` },
            function (response) {
              // 请求成功时的回调函数(获取省市区的行政编码打开小程序)
              that.tabelloading = false;
              if (response.townId) {
                that.submitApi(response)
              }
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            that.tabelloading = false;
            console.error(error);
          });
        },



        // 携带市区镇的id返回小程序进行注册
        submitApi(allId) {
          // let that = this
          // var paramsData = {
          //   mobile: that.phone,
          //   openId: that.openId,
          //   pid: that.pid,
          //   provinceId: allId.provinceId,
          //   tenantCode: '1002'
          // }
          // that.tabelloading = true;
          // $.ajax({
          //   url: `${that.baseUrl2}/renren-api/api/login`,
          //   type: 'POST',
          //   data: JSON.stringify(paramsData),
          //   headers: {
          //     'content-type': 'application/json',
          //     'token': '',
          //     'tenantCode': 1002
          //   },
          //   contentType: 'application/json', // 可选，确保发送的content-type与headers一致
          //   processData: false, // 可选，防止jQuery尝试处理发送的数据
          //   success: function (response) {
          //     if (response.msg == 'success') {
          //       that.tabelloading = false;
        
          //     }
          //   },
          //   error: function (error) {
          //     console.log('Error:', error);
          //     that.tabelloading = false;

          //   }
          // });
        },

        // 获取签证信息
        getqianzhenginfo() {
          var that_a = this
          $.get(`${this.baseUrl}miniapp/app/GetWeChatConfig`, {
            appId: that_a.appid,
            url: that_a.wxPagePath
          },
            function (response) {
              that_a.wechatConfig = { ...response }
              if (response.appId) {
                that_a.initWechatConfig()
              }
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            that_a.loading = false;
          });
        },
        initWechatConfig() {
          console.log(this.wechatConfig, '获取签证信息');
          // 假设从后端获取的签名数据通过props或其他方式传递进来
          const { appId, timestamp, nonceStr, signature } = this.wechatConfig;
          wx.config({
            debug: false,
            appId: appId,
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: ["navigateToMiniProgram"]
          });

          wx.ready(() => {
            console.log("微信JSSDK初始化成功");
          });

          wx.error((res) => {
            console.error("微信JSSDK初始化失败", res);
          });
        },
        //小程序内嵌H5跳转小程序和H5跳转小程序
        navigateToMiniProgram(ssq) {
          // 这里使用微信JSSDK的API打开小程序
          let d = { ...ssq }
          d.phone = this.phone
          d.model = '推广未注册'
          try {
            let ssqData = JSON.stringify(d)
            wx.miniProgram.navigateTo({
              appId: `${this.appid}`,
              url: `/pagesSub/mine/userSetting?otherParsmas=${ssqData}`
            });
          } catch (err) {
            console.error('跳转小程序出错:', err);
          }
        },
        // 获取全国省级地图数据
        getShengJson() {
          var that = this
          that.loading = true;
          $.get(`${this.baseUrl}miniapp/home/GetGeoJson`, {

          },
            function (response) {
              // 请求成功时的回调函数(获取省市区的行政编码打开小程序)
              that.loading = false;
              that.dongtaijson = JSON.parse(response.Data);
              // console.log(that.dongtaijson,);
              that.getsheng_zhengZhangShu('', '', '', '')
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            that.loading = false;
            console.error(error);
          });
        },
        // 获取省镇长申请人数
        getsheng_zhengZhangShu(provincevalue, cityvalue, districtvalue, townvalue, mapData) {
          var that = this
          var result = ''
          let params = {
            province: provincevalue,
            city: cityvalue,
            district: districtvalue,
            town: townvalue,
          }
          that.loading = true;
          $.get(`${this.baseUrl}miniapp/Arera/TongJi`, {
            ...params
          },
            function (response) {
              that.dongtaijson.features.forEach(item1 => {
                const item2 = response.find(item2 => item2.name == item1.properties.name);
                if (item2) {
                  Object.assign(item1, item2);
                }
              });
              that.provinceBackData = that.dongtaijson
              that.zhucetype = that.dongtaijson.features.map(items => {
                let color = ''
                if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                  color = '#5d5d66'
                } else if (items.zhenzhang_renshu > 0) {
                  color = '#c40'
                } else if (items.zhenzhang_renshu <= 0) {
                  color = '#101129'
                }
                return {
                  name: `${items.name}`, //区块名称
                  itemStyle: {
                    normal: {
                      areaColor: `${color}`

                    }
                  }
                }
              })
              that.getEcharts()
              that.loading = false;
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            that.loading = false;
            console.error(error);
          });
        },


        // 获取市所申请镇长人数
        getshi_zhengZhangShu(provincevalue, cityvalue, districtvalue, townvalue, mapData) {
          var that = this
          var result = ''
          let params = {
            province: provincevalue,
            city: cityvalue,
            district: districtvalue,
            town: townvalue,
          }
          that.loading = true;
          $.post(`${this.baseUrl}miniapp/Arera/TongJiCity`, {
            ...params
          },
            function (response) {
              that.cityData.features.forEach(item1 => {
                const item2 = response.find(item2 => item2.name == item1.properties.name);
                if (item2) {
                  Object.assign(item1, item2);
                }
              });
              that.dongtaijson = that.cityData
              that.cityBackData = that.cityData
              that.zhucetype = that.dongtaijson.features.map(items => {
                let color = ''
                if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                  color = '#5d5d66'
                } else if (items.zhenzhang_renshu > 0) {
                  color = '#c40'
                } else if (items.zhenzhang_renshu <= 0) {
                  color = '#101129'
                }
                return {
                  name: `${items.name}`, //区块名称
                  itemStyle: {
                    normal: {
                      areaColor: `${color}`

                    }
                  }
                }
              })
              that.getEcharts()
              that.loading = false;
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            that.loading = false;
            console.error(error);
          });
        },

        // 获取区所申请镇长人数
        getqu_zhengZhangShu(provincevalue, cityvalue, districtvalue, townvalue, mapData) {
          var that = this
          var result = ''
          let params = {
            province: provincevalue,
            city: cityvalue,
            district: districtvalue,
            town: townvalue,
          }
          that.loading = true;
          $.post(`${this.baseUrl}miniapp/Arera/TongJiQu`, {
            ...params
          },
            function (response) {
              that.districtData.features.forEach(item1 => {
                const item2 = response.find(item2 => item2.name == item1.properties.name);
                if (item2) {
                  Object.assign(item1, item2);
                }
              });
              that.dongtaijson = that.districtData
              that.zhucetype = that.dongtaijson.features.map(items => {
                let color = ''
                if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
                  color = '#5d5d66'
                } else if (items.zhenzhang_renshu > 0) {
                  color = '#c40'
                } else if (items.zhenzhang_renshu <= 0) {
                  color = '#101129'
                }
                return {
                  name: `${items.name}`, //区块名称
                  itemStyle: {
                    normal: {
                      areaColor: `${color}`

                    }
                  }
                }
              })
              that.getEcharts()
              that.loading = false;
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            console.error(error);
          });
          return result
        },
        // 返回到省级别
        backProvince() {
          this.back = 'backsheng'
          this.provinceData = this.provinceBackData
          this.dongtaijson = this.provinceBackData

          this.zhucetype = this.provinceBackData.features.map(items => {
            let color = ''
            if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
              color = '#5d5d66'
            } else if (items.zhenzhang_renshu > 0) {
              color = '#c40'
            } else if (items.zhenzhang_renshu <= 0) {
              color = '#101129'
            }
            return {
              name: `${items.name}`, //区块名称
              itemStyle: {
                normal: {
                  areaColor: `${color}`

                }
              }
            }
          })
          this.setMap(this.provinceData, this.level)
        },
        // 返回到市级别
        backCity() {
          this.back = 'backshi'
          this.cityData = this.cityBackData
          this.dongtaijson = this.cityBackData
          this.zhucetype = this.cityBackData.features.map(items => {
            let color = ''
            if (items.shenqing_renshu == 0 && items.zhenzhang_renshu == 0) {
              color = '#5d5d66'
            } else if (items.zhenzhang_renshu > 0) {
              color = '#c40'
            } else if (items.zhenzhang_renshu <= 0) {
              color = '#101129'
            }
            return {
              name: `${items.name}`, //区块名称
              itemStyle: {
                normal: {
                  areaColor: `${color}`

                }
              }
            }
          })
          this.setMap(this.cityData, this.level)
        },

        // 重绘地图
        setMap(mapData, level) {
          console.log("一次")
          var that = this
          var charEle = document.getElementById("mainMap");
          var charEch = echarts.init(charEle);
          // 注册或更新地图数据
          echarts.registerMap("map", { geoJSON: mapData });
          // 更新配置项中的数据系列
          charEch.setOption({
            // 更新series中的data为省份数据
            series: [{
              data: mapData.features.map(item => ({
                name: item.properties.name,
                code: item.properties.adcode,
                id: item.properties.id,
                info: { ...item }
              }))
            }],

            tooltip: {
              show: false,
              trigger: 'item',
              formatter: function (params) {
                let { name, shenqing_renshu, zhenzhang_renshu } = params.data.info
                let content = `
                              <div style="width:200px">
                              <p>名称：${name}</p>  
                              <p>镇长申请人数：${shenqing_renshu}</p>  
                              <p>镇长注册人数：${zhenzhang_renshu}</p>  

                              </div>
                                `
                return `${content}`;
              }
            },
            grid: {
              left: "0px",
              right: "80px",
              top: "2px",
              bottom: "2px",
            },
            geo: {
              map: "map",
              zoom: 3,
              // 最小缩放
              scaleLimit: {
                min: 0.8,
              },
              label: {
                color: "#fff",
                show: true,
                formatter: function (params) {

                  let name = ''
                  let sqrs = ''
                  let zcrs = ''
                  let levels = ''
                  let dataOrgre = ''
                  if (that.back == 'backsheng') {
                    dataOrgre = that.provinceBackData
                  } else if (that.back == 'backshi') {
                    dataOrgre = that.cityBackData
                  } else {
                    dataOrgre = that.dongtaijson
                  }
                  dataOrgre.features.forEach((items, index) => {
                    if (items.name && items.name == params.name) {
                      name = items.name
                      sqrs = items.shenqing_renshu
                      zcrs = items.zhenzhang_renshu
                      levels = items.properties.level
                    }
                  })
                  if (sqrs == 0 && zcrs == 0) {
                    return `
                  ${name} (无)
                    `
                  } else {
                    return `
                  ${name}
                      镇长人数:${zcrs}人
                      申请人数:${sqrs}人
                    `
                  }

                },
              },
              emphasis: {
                label: {
                  color: "#fff",
                  show: true,
                },
                itemStyle: {
                  areaColor: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#073684", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#2B91B7", // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
              roam: true,
              itemStyle: {
                areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                borderColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00F6FF",
                    },
                    {
                      offset: 1,
                      color: "#87ADCB",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(10,76,139,1)",
                shadowOffsetY: 0,
                shadowBlur: 60,
                borderWidth: 1,
              },
              regions: [
                ...that.zhucetype

              ],
              // 添加立体效果
              viewControl: {
                distance: 100, // 地图视角的远近，默认为100
                alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
              },
            },
            series: [
              {
                name: "太仓地图",
                type: "map",
                map: "map", // 确保与地图的名称对应
                geoIndex: 0, // 设置对应的 geoIndex
                data: this.dongtaijson.features.map((item, index) => {
                  return {
                    name: item.properties.name,
                    code: item.properties.adcode,
                    info: { ...item },
                    adcode: item.properties.adcode,
                    level: item.properties.level
                  };
                }),

              },
            ],

          });
          this.getEcharts()

        },

        getEcharts() {

          var that = this;
          var charEle = document.getElementById("mainMap");
          var charEch = echarts.init(charEle);
          // 检查地图是否已经注册
          if (!echarts.getMap("map")) {
            echarts.registerMap("map", {
              geoJSON: this.dongtaijson
            });


          }

          var options = {
            tooltip: {
              show: false,
              trigger: 'item',
              // formatter: function (params) {
              //   let {name,shenqing_renshu,zhenzhang_renshu} = params.data.info
              //   let  content = `
              //                 <div style="width:200px">
              //                 <p>名称：${name}</p>  
              //                 <p>镇长申请人数：${shenqing_renshu}</p>  
              //                 <p>镇长注册人数：${zhenzhang_renshu}</p>  

              //                 </div>
              //                   `
              //   return `${content}`;
              // }
            },
            grid: {
              left: "0px",
              right: "80px",
              top: "2px",
              bottom: "2px",
            },
            geo: {
              map: "map",
              zoom: 3,
              // 最小缩放
              scaleLimit: {
                min: 0.8,
              },
              label: {
                color: "#fff",
                show: true,
                formatter: function (params) {
                  let name = ''
                  let sqrs = ''
                  let zcrs = ''
                  let levels = ''
                  let dataOrgre = ''
                  if (that.back == 'backsheng') {
                    dataOrgre = that.provinceBackData
                  } else if (that.back == 'backshi') {
                    dataOrgre = that.cityBackData
                  } else {
                    dataOrgre = that.dongtaijson
                  }
                  dataOrgre.features.forEach((items, index) => {
                    if (items.name && items.name == params.name) {
                      name = items.name
                      sqrs = items.shenqing_renshu
                      zcrs = items.zhenzhang_renshu
                      levels = items.properties.level
                    }
                  })
                  if (sqrs == 0 && zcrs == 0) {
                    return `
                  ${name} (无)
                    `
                  } else {
                    return `
                  ${name}
                      镇长人数:${zcrs}人
                      申请人数:${sqrs}人
                    `
                  }

                },
              },
              emphasis: {
                label: {
                  color: "#fff",
                  show: true,
                },
                itemStyle: {
                  areaColor: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#073684", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#2B91B7", // 100% 处的颜色
                      },
                    ],
                  },
                },
              },
              roam: true,
              itemStyle: {
                areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                borderColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00F6FF",
                    },
                    {
                      offset: 1,
                      color: "#87ADCB",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(10,76,139,1)",
                shadowOffsetY: 0,
                shadowBlur: 60,
                borderWidth: 1,
              },
              regions: [
                ...that.zhucetype

              ],
              // 添加立体效果
              viewControl: {
                distance: 100, // 地图视角的远近，默认为100
                alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
              },
            },
            series: [
              {
                name: "太仓地图",
                type: "map",
                map: "map", // 确保与地图的名称对应
                geoIndex: 0, // 设置对应的 geoIndex
                data: this.dongtaijson.features.map((item, index) => {
                  return {
                    name: item.properties.name,
                    code: item.properties.adcode,
                    info: { ...item },
                    adcode: item.properties.adcode,
                    id: item.properties.id,
                    level: item.properties.level
                  };
                }),

              },
            ],
          };
          charEch.setOption(options);
          if (this.sign) {
            charEch.on("click", async function (params) {
              that.back = ''
              if (params.data.level == 'province') {
                that.tipifi[0] = params.data.name
              }
              if (params.data.level == 'city') {
                that.tipifi[1] = params.data.name
              }
              if (params.data.level == 'district') {
                that.tipifi[2] = params.data.name
              }
              if (params.data.code) {
                that.Adcode = params.data.code;
                that.quid = params.data.info.id
                that.title = params.data.name;
                that.level = params.data.info.properties.level
              }
              if (params.componentType === "series" && params.seriesType === "map") {
                // 获取市区json数据
                if (that.level != 'district') {
                  that.loading = true;
                  $.get(`${that.baseUrl}miniapp/home/GetGeoJson`, { adcode: that.Adcode },
                    function (response) {
                      that.loading = false;
                      const data = JSON.parse(response.Data);
                      if (that.level == 'province') {
                        that.getshi_zhengZhangShu(params.data.adcode, '', '', '')

                        that.cityData = data
                      } else if (that.level == 'city') {
                        that.getqu_zhengZhangShu('', params.data.adcode, '', '')
                        that.districtData = data
                      }
                      charEch.clear();
                      let mapData = data.features.map((item, index) => {
                        return {
                          name: item.properties.name,
                          code: item.properties.adcode,
                          info: { ...item }
                        };
                      });
                      // charEch.resize();
                      echarts.registerMap("map", { geoJSON: data });
                      // that.getEcharts();
                      charEch.setOption(
                        {
                          grid: {
                            left: "0px",
                            right: "80px",
                            top: "2px",
                            bottom: "2px",
                          },
                          geo: {
                            map: "map",
                            zoom: 1.2,
                            // 最小缩放
                            scaleLimit: {
                              min: 0.8,
                            },
                            label: {
                              color: "#fff",
                              show: true,
                            },
                            emphasis: {
                              label: {
                                color: "#fff",
                                show: true,
                                formatter: function (params) {
                                  // 自定义标签内容，这里直接返回地名，你也可以添加更多内容或逻辑
                                  let name = ''
                                  let sqrs = ''
                                  let zcrs = ''
                                  let levels = ''
                                  let dataOrgre = ''
                                  if (that.back == 'backsheng') {
                                    dataOrgre = that.provinceBackData
                                  } else if (that.back == 'backshi') {
                                    dataOrgre = that.cityBackData
                                  } else {
                                    dataOrgre = that.dongtaijson
                                  }
                                  dataOrgre.features.forEach((items, index) => {
                                    if (items.name && items.name == params.name) {
                                      name = items.name
                                      sqrs = items.shenqing_renshu
                                      zcrs = items.zhenzhang_renshu
                                      levels = items.properties.level
                                    }
                                  })
                                  if (sqrs == 0 && zcrs == 0) {
                                    return `
                                  ${name} (无)
                                        `
                                  } else {
                                    return `
                                ${name}
                                镇长人数:${zcrs}人
                                申请人数:${sqrs}人
                                        `
                                  }
                                },
                              },
                              itemStyle: {
                                areaColor: {
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                    {
                                      offset: 0,
                                      color: "#073684", // 0% 处的颜色
                                    },
                                    {
                                      offset: 1,
                                      color: "#2B91B7", // 100% 处的颜色
                                    },
                                  ],
                                },
                              },
                            },
                            roam: true,
                            itemStyle: {
                              areaColor: "rgba(0, 0, 0, 0)", // 设置为透明色
                              borderColor: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                  {
                                    offset: 0,
                                    color: "#00F6FF",
                                  },
                                  {
                                    offset: 1,
                                    color: "#87ADCB",
                                  },
                                ],
                                false
                              ),
                              shadowColor: "rgba(10,76,139,1)",
                              shadowOffsetY: 0,
                              shadowBlur: 60,
                              borderWidth: 1,
                            },
                            tooltip: {
                              show: false,
                            },
                            // 添加立体效果
                            viewControl: {
                              distance: 100, // 地图视角的远近，默认为100
                              alpha: 30, // 地图视角绕 x 轴（左右旋转）的角度，默认为 30
                              beta: 0, // 地图视角绕 y 轴（上下旋转）的角度，默认为 0
                            },
                          },
                          series: [
                            {
                              name: "太仓地图",
                              type: "map",
                              map: "map", // 确保与地图的名称对应
                              geoIndex: 0, // 设置对应的 geoIndex
                              data: mapData,
                            },
                          ],
                        },
                        true
                      );
                    }
                  ).fail(function (xhr, status, error) {
                    // 请求失败时的回调函数
                    that.loading = false;
                    console.error(error);
                  });
                } else {
                  // 获取区县下的所有镇的数据
                  that.getTownList()
                }


              }
            });
          }
          this.sign = false
          return charEch;
        },
        // 获取区县下的所有镇的数据
        getTownList() {
          var other = this
          other.loading = true;
          $.get(
            `${this.baseUrl}miniapp/Arera/GetZhen`,
            { code: `${other.Adcode}` },
            function (response) {
              // 请求成功时的回调函数
              other.loading = false;
              // other.zhenZhangData = response;
              other.getYuGuMoney(response, other.quid)
              // other.dialogTableVisible = true;
            }
          ).fail(function (xhr, status, error) {
            // 请求失败时的回调函数
            other.loading = false;
            console.error(error);
          });
        },
        // 获取预估收入
        getYuGuMoney(zhenData, quAdcode) {
          let that = this
          that.tabelloading = true;
          let d = {
            areaId: quAdcode
          }
          $.ajax({
            url: `${that.baseUrl2}renren-api/statementimport/sumTownerPriceByArea?areaId=${quAdcode}`,
            type: 'GET',
            headers: {
              'content-type': 'application/json',
              'token': '',
              'tenantCode': 1002
            },
            contentType: 'application/x-www-form-urlencoded', // 可选，确保发送的content-type与headers一致
            processData: false, // 可选，防止jQuery尝试处理发送的数据
            success: function (response) {
              if (response.msg == 'success') {
                that.zhenZhangData = response;
                let arr1 = response.data
                let arr2 = zhenData

                const mapById = arr1.reduce((acc, cur) => {
                  acc[cur.townId] = cur;
                  return acc;
                }, {});

                arr2 = arr2.map(item => {
                  const match = mapById[item.id];
                  if (match) {
                    return { ...item, ...match };
                  }
                  return item;
                });
                // alert(JSON.stringify(response.data))
                // alert(JSON.stringify(arr2))
                that.zhenZhangData = arr2;
                // console.log(that.zhenZhangData,'that.zhenZhangData');

                that.dialogTableVisible = true;

              }
              that.tabelloading = false;
            },
            error: function (error) {
              console.log('Error:', error);
              alert(JSON.stringify(error))
              that.tabelloading = false;
            }
          });
        },
        // 处理预估收入显示问题
        showYuGu(obj) {
          var infos = '0'
          console.log(infos,'infos')
          const entries = Object.entries(obj);
          const sixthEntry = entries[5]; // 第六个键值对
          const seventhEntry = entries[6]; // 第七个键值对
          const sixthValue = sixthEntry[1]; // 第六个属性值
          const seventhValue = seventhEntry[1]; // 第七个属性值
          if (sixthValue == seventhValue) {
            infos = `${sixthValue}`
            return infos
          } else {
            infos = `${sixthValue} ~ ${seventhValue}`
            return infos
          }
          
        }


      },
    });
  </script>
</body>

</html>